<template>
    <div v-show="!this.$store.isLoading">
        <div class="box_bg">
            <h2 class="box_tit">
                <i class="icon icon1"></i>角色管理
                <i class="reti"></i>
            </h2>
            <!-- <div class="blank20"></div> -->

            <div class="box">
              <a href="javascript:void(0);" class="btns add" @click="show([null,'add'])">增加角色</a>
            </div>
            <!-- <v-table :tableData="tableData" :tableHead="tableHead" @show='show' @del='qvXiaoDel'></v-table> -->

            <!-- 页码 -->
            <!-- 页码 -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column :show-overflow-tooltip="true" type="index" label="序号" align="center" width='60'></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="name" align="center" label="角色名称"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="remark" align="center" label="角色说明"></el-table-column>
                <el-table-column prop="" align="center" label="操作" fixed="right" width="250">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="show([scope.row.id,'edit'])">编辑</el-button>
                        <el-button type="text" size="small" @click="qvXiaoDel([scope.row.id])">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="paginationBox">
                <el-pagination
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  :current-page.sync="page.currentPage"
                  :page-size="page.visiblePages"
                  :page-sizes="[15,30,50,100]"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page.totalPages">
                </el-pagination>
            </div>
            <!-- //弹层 编辑 -->
            <div v-show="isshow">
                <div id="mask" v-bind:style="{ width: fullWidth + 'px', height: fullHeight + 'px' }"></div>
                <div id="box">
                    <strong @click="closeLay()"></strong>
                    <div class="title" v-show="isAddState == false">角色信息修改</div>
                    <div class="title" v-show="isAddState == true">角色信息添加</div>
                    <div class="contents">
                        <div class="zTreeLeft">
                            <el-form ref="EditLists" :model="EditLists" :rules="rules" label-width="110px">
                                <el-form-item label="角色名称：" prop="name">
                                    <el-input v-model="EditLists.name"></el-input>
                                </el-form-item>
                                <el-form-item label="资源配置：">
                                    <div class="zTreeBody">
                                        <el-tree
                                            :data="zTreeList"
                                            show-checkbox
                                            ref="tree"
                                            node-key="id"
                                            :default-checked-keys="initialResouceIds"
                                            :props="defaultProps">
                                        </el-tree>
                                    </div>
                                </el-form-item>
                                <el-form-item label="角色说明:">
                                    <el-input type="textarea" v-model="EditLists.remark"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>

                        <div class="zTreeRight">
                            <div id="bacImg"></div>
                            <h2>用户设置</h2>
                            <el-transfer
                              v-model="noList"
                              filterable
                              :titles="['已选', '未选']"
                              @change="clickTransfer"
                              :data="roleData">
                            </el-transfer>
                        </div>
                    </div>
                    <div class="bottoM">
                        <div class="div1" @click="overEdit('EditLists')" v-loading.fullscreen="fullscreenLoading">确定</div>
                        <div class="div2" @click="closeLay">取消</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 这是删除的 弹层 -->
        <div v-show="isDelShows">
            <div id="delmask" v-bind:style="{ width: fullWidth + 'px', height: fullHeight + 'px' }"></div>
             <div id="delbox"> <!-- ..v-show="types === 'del'" -->
                <strong class="strongs" @click="closeLay"></strong>
                <div class="title">提示框</div>
                <div class="oNav">
                    <div class="div1">
                        <div class="div11" style=""></div>
                        <div class="div12">
                            <h2>是否删除</h2>
                            <span>如果是请点击确定，不是请点击取消退出</span>
                        </div>
                    </div>
                </div>
                <div class="layerbtn">
                    <el-button class="btns" @click='delTrue' type="text" size="small">确定</el-button>
                    <el-button  class="btns cancel" @click="closeLay" type="text" size="small">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
//
import { rolesHandleUrl,rolesUrl,resourceUrl,userListUrl,rolesV2RoleUrl,selectAllInfoForTreeUrl} from "../../../axios/api.js";
import vTable from "../../common/Table.vue";
import vbootstrapStyle from "../../../../static/css/bootstrapStyle.css";
import vZtreeCore from "../../../../static/js/jquery.ztree.core.js";
import vZtreeExcheck from "../../../../static/js/jquery.ztree.excheck.js";
export default {
        data() {
            return {
                roleData:[],
                types: "",
                isPage: false,
                tableData: [],
                fullscreenLoading: false,
                tableHead: [{
                    marking: "name",
                    cName: "角色名称"
                },
                {
                    marking: "remark",
                    cName: "角色说明"
                },
                {
                    marking: "",
                    cName: "操作"
                }],
                // currentPage:1,
                page: {
                    totalPages: null,
                    visiblePages: 15,
                    currentPage: 1
                },
                isshow: false,
                isDelShows: false,
                fullWidth: document.documentElement.clientWidth,
                fullHeight: document.documentElement.clientHeight,
                haveList: [],
                noList: [],
                EditLists: {
                    name: '',
                    remark: '',
                },
                //编辑获取数据；
                zTreeList: [],
                //ztree 列表
                nowDepartment: [],
                //存放选中的资源配置  ztree
                id: "",
                delId: "",
                arryNo: [],
                //克隆未选择的列表
                arryHv: [],
                //克隆 已选择 的列表
                arr: [],
                //要删掉的那个列表项
                userIds: [],
                //编辑 确定是的 已选择 的ids
                initialResouceIds:[],
                resouceIds: [],
                //编辑 确定是的 资源 的ids
                currentType: 'add', //当前弹层所在状态
                defaultProps: {
                    children: 'child',
                    label: 'resourceName'
                },
                rules: {
                    name: [
                        { required: true, message: "请输入角色名称", trigger: "blur" }
                    ]
                },
                isAddState : false
            };
        },
        beforeMount() {
            // this.loading = this.$loading({
            //     lock: true,
            //     text: "拼命加载中，请稍等！",
            //     spinner: "el-icon-loading",
            //     background: "rgba(255, 255, 255, 0.6)"
            // });
        },
        mounted() {
            this.getListRoles();
        },
        methods: {
            // Transfer 穿梭框 事件
            clickTransfer(value, direction, movedKeys) {
                if(direction == 'left'){  //增加用户
                   this.userIds = _.union(this.haveList,this.userIds, movedKeys);
                }else if(direction == 'right'){ //删除用户
                    // this.userIds = _.union(this.haveList,this.userIds, movedKeys);
                    this.haveList = _.xor(this.haveList, movedKeys); // 删除移除的用户
                    this.userIds = _.xor(this.userIds, movedKeys); // 删除移除的用户
                }
            },
            // 关闭弹层
            closeLay() {
                this.isshow = false;
                this.isDelShows = false;
            },
            //// 请求角色列表
            getListRoles() {
                let self = this;
                self.axios({
                    method: "get",
                    url: api.rolesUrl,
                    params: {
                        "page": self.page.currentPage,
                        "pageSize": self.page.visiblePages
                    }
                }).then(function(response) {
                    self.tableData = response.data.data.list;
                    //页码列表
                    self.page.totalPages = Math.ceil(response.data.data.total);
                    // self.page.currentPage = response.data.data.pageNum;

                    self.fullscreenLoading = false;
                })
            },
            //取消删除
            qvXiaoDel(str) {
                this.isDelShows = !this.isDelShows;
                this.types = "del";
                // 获取需要删除的Id
                this.delId = str[0];
            },
            //删除
            delTrue() {
                // 显示弹层
                this.isDelShows = !this.isDelShows;
                let self = this;
                self.axios({
                    method: "DELETE",
                    url: self.axios.defaults.baseURL + "/roles/" + this.delId
                }).then(function(response) {
                    if(response.data.success){
                        self.$message({
                            type: 'success',
                            message: response.data.msg,
                        });
                        self.getListRoles();
                    }else{
                        self.$message({
                            duration: 1000,
                            message: response.data.msg,
                            center: true,
                            type: 'error'
                        });
                    }
                })
            },
            //编辑显示
            show(Arry) {
                let self = this;
                this.isshow = !this.isshow;
                // this.fullscreenLoading = true;
                // 更改当前弹层所在状态
                this.currentType = Arry[1];

                if (Arry[1] == 'add') { //添加时
                    this.userIds = [];  //清楚userIds列表
                    this.EditLists =  eval('(' + "{name:'',remark:''}"+')');
                    this.initialResouceIds = [];   // 当前选择的资源
                    this.isAddState = true;
                    // 获取用户列表
                    // *******************************************
                    this.getAddUserList();
                    this.id = 0;
                    // 获取组织资源列表
                    self.getResourceList()
                } else if (Arry[1] == 'edit') { //编辑时
                    this.id = Arry[0];
                    //请求资源列表
                    this.isAddState = false;
                    self.getResouceIds(self.id);
                }
                // 获取当前的用户信息
                let len = this.tableData.length;
                for (var i = 0; i < len; i++) {
                    if (this.tableData[i].id == this.id) {
                        this.EditLists =  _.cloneDeep(this.tableData[i]);
                    }
                }

            },
            // 增加用户时获取用户列表
            getAddUserList(){
                var self = this;
                //请求资源列表
                self.axios({
                    method: "get",
                    url: selectAllInfoForTreeUrl
                }).then(function(response) {
                    // 提示信息
                    if (response.data.success) {
                        self.noList = [];   // 未选择用户
                        self.haveList = [];  // 已选择用户
                        // 所有用户信息-- 分为 已选(yes) 未选(no)
                        //判断数据
                        _.forOwn(response.data.data,function(value, key) {
                            value.key = value.id;
                            value.label = value.name;
                            value.selected = 'no';
                            self.noList.push(value.id);
                        });
                        self.roleData = JSON.parse(JSON.stringify(response.data.data));
                        self.fullscreenLoading = false;
                    } else {
                        self.$message({
                            duration: 1000,
                            message: response.data.msg,
                            center: true,
                            type: "error"
                        });
                    }

                })
            },
            // 获取组织资源列表
            getResourceList(){
                var self = this;
                //请求资源列表
                self.axios({
                    method: "get",
                    url: resourceUrl
                }).then(function(response) {
                    // 提示信息
                    if (response.data.success) {
                        self.zTreeList = response.data.data;
                    } else {
                        self.$message({
                            duration: 1000,
                            message: response.data.msg,
                            center: true,
                            type: "error"
                        });
                    }

                })
            },
            // 获取用户资源
            getResouceIds(id){
                var self = this;
                //请求资源列表
                this.axios({
                    method: "get",
                    url: rolesV2RoleUrl + id
                }).then(function(response) {
                    // 提示信息
                    if (response.data.success) {
                        // 所有用户信息-- 分为 已选(yes) 未选(no)
                        self.roleData = response.data.data.usersList
                        self.haveList = [];  // 已选择用户
                        self.noList = [];    // 未选择用户
                        //判断数据
                        _.forOwn(response.data.data.usersList,function(value, key) {
                                value.key = value.id;
                                value.label = value.name;
                                if (value.selected == 'no') {
                                    self.noList.push(value.id);
                                } else {
                                    self.haveList.push(value.id);
                                    self.userIds.push(value.id);
                                    self.userIds = _.uniq(self.userIds);
                                }
                        });
                        // 获取当前角色已选择的资源 IDS
                        self.initialResouceIds = JSON.parse(JSON.stringify(response.data.data.resouceIds));
                        // 获取资源列表
                        self.getResourceList();
                    } else {
                        self.$message({
                            duration: 1000,
                            message: response.data.msg,
                            center: true,
                            type: "error"
                        });
                    }

                })
            },
            //编辑 完成的  确定 提交
            overEdit(EditLists) {
                let data = ''; // 提交数据
                let curUrl = 'put'; // 提交地址
                let curMethod = ''; // 提交方式
                this.resouceIds = this.$refs.tree.getCheckedKeys();
                //判断提交的数据，方法，地址，格式
                if (this.currentType == 'add') {
                    data = {
                        name: this.EditLists.name,
                        remark: this.EditLists.remark,
                        resouceIds: this.resouceIds,
                        userIds: this.userIds
                    };
                    curUrl = rolesUrl;
                    curMethod = 'post';
                } else if (this.currentType == 'edit') {
                    data = {
                        id: this.id,
                        name: this.EditLists.name,
                        remark: this.EditLists.remark,
                        resouceIds: this.resouceIds,
                        userIds: this.userIds
                    };
                    curUrl = rolesHandleUrl + this.id;
                    curMethod = 'put';
                }
                let self = this;
                // 发送请求信息
                self.$refs[EditLists].validate((valid) => {
                if (valid) {
                    // 验证通过
                    // 判断是添加还是修改
                    self.axios({
                        method: curMethod,
                        data: data,
                        url: curUrl
                    }).then(function(response) {
                        if(response.data.success){
                            self.$message({
                                type: 'success',
                                message: response.data.msg,
                            });
                            self.isshow = !self.isshow;
                            // self.page.currentPage = 1;
                            self.getListRoles();
                        }else{
                            self.$message({
                                duration: 1000,
                                message: response.data.msg,
                                center: true,
                                type: "error"
                            });
                        }
                    })
                }else{

                }
            });
            },
            // 每页多少条
            handleSizeChange(val) {
                if(isNaN(val)){
                    val = 30;
                }
                // 点击分也是 调用列表
                this.page.visiblePages = val;
                this.getListRoles();
            },
            handleCurrentChange(val) {
                if(val < 1){
                    val = 1;
                }
                this.page.currentPage = val;
                this.getListRoles();
            }
        },
        components: {
            vTable
        }
    };
</script>

<style scoped>
#mask,
#delmask {
  position: fixed;
  background: rgb(0, 0, 0);
  opacity: 0.5;
  filter: alpha(opacity=50);
  left: 0px;
  top: 0px;
  z-index: 99;
}
#box {
  position: fixed;
  width: 1000px;
  height: 562px;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px 10px 0 0;
  z-index: 10000;
}
#delbox {
  position: fixed;
  width: 395px;
  height: 200px;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  z-index: 100;
}
strong {
  position: absolute;
  top: 5px;
  right: 5px;
  display: block;
  width: 30px;
  height: 30px;
  background: url(../../../../static/img/close.gif) no-repeat center center;
  cursor: pointer;
}

#box .contents {
  display: block;
  width: 100%;
  height: 513px;
  border-radius: 6px;
}
.box_bg .reti {
  width: 100px;
}
.zTreeLeft {
  float: left;
  width: 437px;
  height: 100%;
  padding: 10px 20px 0 0;
  border-right: 1px solid #cccccc;
  position: relative;
}
.zTreeLeft > span {
  font-size: 12px;
  color: #333;
}
.zTreeLeft > span:nth-child(1) {
  display: inline-block;
  padding: 25px 0 0 11px;
}
.zTreeLeft > span > i {
  color: red;
}
.zTreeLeft > input {
  margin-left: 15px;
  height: 26px;
  width: 305px;
  line-height: 26px;
  font-size: 12px;
  /* color: #cdcdcd; */
  text-indent: 15px;
  border-radius: 4px;
  border: 1px solid #cdcdcd;
  box-sizing: border-box;
  outline: none;
}
.zTreeLeft > .span2 {
  display: inline-block;
  padding: 170px 0 0 25px;
}

.zTreeLeft > .span3 {
  display: inline-block;
  padding: 195px 0 0 25px;
}
.zTreeLeft > textarea {
  width: 303px;
  height: 56px;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin-left: 10px;
  position: absolute;
  bottom: 35px;
  right: 32px;
  line-height: 16px;
  /* text-indent: 25px; */
}
.zTreeRight {
  float: left;
  width: 547px;
  height: 100%;
  position: relative;
}
#bacImg {
  width: 24px;
  height: 37px;
  background: url(../../../../static/img/sidebar/5.png) no-repeat;
  position: absolute;
  top: 256px;
  left: 206px;
}
.zTreeRight > h2 {
  text-align: center;
  height: 48px;
  line-height: 60px;
  font-size: 12px;
}
.zTreeRight .hasYes {
  width: 170px;
  height: 415px;
  position: absolute;
  left: 30px;
  top: 55px;
}
.zTreeRight .hasNo {
  width: 170px;
  height: 415px;
  position: absolute;
  right: 30px;
  top: 55px;
}
#input2,
#input3 {
  width: 130px;
  font-size: 12px;
  color: #cdcdcd;
  text-indent: 15px;
  border-radius: 4px;
  border: 1px solid #cdcdcd;
  box-sizing: border-box;
  outline: none;
}
.hasYes > ul,
.hasNo > ul {
  height: 360px;
  width: 100%;
  overflow-y: auto;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin-top: 24px;
}
.hasYes > ul > li,
.hasNo > ul > li {
  width: 100%;
  height: 35px;
  font-size: 12px;
  line-height: 35px;
  text-align: center;
  border-bottom: 1px solid #cdcdcd;
  color: #333;
  cursor: pointer;
}
.hasYes > ul > li:hover,
.hasNo > ul > li:hover {
  background: #25b0b0;
  color: #fff;
}

#box .bottoM {
  width: 100%;
  height: 48px;
  background: #eef1f0;
  border-radius: 0 0 10px 10px;
  position: relative;
  padding-top: 10px;
}
.bottoM .div1,
.bottoM .div2 {
    height: 30px;
    width: 96px;
    font-size: 14px;
    text-align: center;
    line-height: 28px;
    color: #FFF;
    background: #22b0ad;
    border-radius: 4px;
    border: 1px solid #00bbbd;
    margin: 0 0 0 33%;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.bottoM .div2 {
  left: 445px;
  color: #00bbbd;
  background: #FFF;
    margin: -30px 0 0 58%;
}
.box{
  overflow: hidden;
  margin-bottom: 15px;
  text-align: right;
}
/*******************************/
.el-transfer-panel__item{
    border-bottom: 1px solid #DBDBDB;
}
..el-transfer-panel__list.is-filterable{
    height: 350px;
}
.el-transfer-panel{
    width: 190px;
    height:350px;
    border: 1px solid #cdcdcd;
    // border:0;
}
.el-transfer-panel__body{
    padding-top: 10px;
}
.el-transfer-panel__header{
    background: #fff;
    border-color: #cdcdcd;
    // display:none;
}
.el-transfer-panel__list.is-filterable{
    height: 300px;
    border-radius: 4px;
    // border: 1px solid #cdcdcd;
}
.el-transfer-panel__filter .el-input__inner{
    border-radius: 4px;
}
.el-transfer {
    font-size: 12px;
    padding-left: 45px;
}
.el-transfer-panel__item{
    padding-top: 5px;
    height: 38px;
    line-height: 38px;
}
.el-transfer-panel__item .el-checkbox__input{
    top: 12px;
}
.el-transfer__button,.el-transfer__buttons .el-transfer__button.is-disabled, .el-transfer__buttons .el-transfer__button.is-disabled:hover{
   border-radius: 4px;
}
</style>